<template>
	<view class="member">
		<view class="member_heared">
			<view class="left_heared">
				<image src="../../static/member/member.png" style="width: 48px;height: 48px;"></image>
				<view>
					<view>用户昵称</view>
					<view>18672326666</view>
				</view>
			</view>
			<view class="right_heared">
				<view class="heared_switch">切换账户<u-icon name="arrow-right"></u-icon></view>
			</view>
		</view>

		<view class="heared_score">
			<view class="score_desc">
				<u-icon name="integral-fill" color="#FFDBB5FF" size="40"></u-icon>
				<view class="title">会员积分<text>积分无门跨抵现使用</text></view>
			</view>
			<view class="score_detail">
				<text>6868</text>
				<view class="btn">积分明细</view>
			</view>
		</view>

		<view class="order_list">
			<view class="list_heared">
				<view>我的订单</view>
				<view>查看全部></view>
			</view>
			<view class="list_type">
				<view v-for="(item,index) in typeList" :key="index" class="type_title">
					<image :src="item.img" style="width: 52rpx;height: 52rpx"></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>

		<view class="collect_list">
			<view v-for="(item,index) in collectList" :key="index" class="collect_title">
				<image :src="item.img" style="width: 84rpx;height: 84rpx"></image>
				<view class="title">{{item.title}}</view>
			</view>
		</view>

		<nav-bar></nav-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList: [{
						title: '代金券',
						url: '',
						img: '../../static/icon/daijinquan.png'
					},
					{
						title: '我的邀请',
						url: '',
						img: '../../static/icon/wodeyaoqingma.png'
					},
					{
						title: '地址管理',
						url: '',
						img: '../../static/icon/address.png'
					},
					{
						title: '联系我们',
						url: '',
						img: '../../static/icon/contact.png'
					},
					{
						title: '收益明细',
						url: '',
						img: '../../static/icon/revenue.png'
					}
				],
				typeList: [{
						title: '待付款',
						url: '',
						img: '../../static/icon/payment.png'
					},
					{
						title: '待称重',
						url: '',
						img: '../../static/icon/metage.png'
					},
					{
						title: '待发货',
						url: '',
						img: '../../static/icon/send.png'
					},
					{
						title: '待收货',
						url: '',
						img: '../../static/icon/delivery.png'
					},
					{
						title: '待评价',
						url: '',
						img: '../../static/icon/evaluate.png'
					},
					{
						title: '退款/售后',
						url: '',
						img: '../../static/icon/refund.png'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
	}

	.member_heared {
		height: 160rpx;
		display: flex;
		background: rgba(255, 255, 255, 1);
		align-items: center;
		justify-content: space-around;

		.left_heared {
			display: flex;

			image {
				margin-right: 30rpx;
			}
		}

		.right_heared {
			height: 60rpx;
			opacity: 1;
			border-radius: 84rpx;
			border: 1rpx solid rgba(221, 221, 221, 1);
			color: rgba(102, 102, 102, 1);
			padding: 12rpx 26rpx;
			line-height: 60rpx;

			.heared_switch {
				display: flex;
			}
		}
	}

	.heared_score {
		height: 140rpx;
		border-radius: 16rpx;
		background: linear-gradient(90deg, rgba(61, 72, 92, 1) 0%, rgba(16, 29, 41, 1) 100%);
		box-shadow: 0rpx 4rpx 20rpx rgba(59, 70, 89, 0.2);
		margin-top: 12rpx;
		padding: 30rpx 50rpx;

		.score_desc {
			display: flex;
			align-items: center;
			margin-top: 15rpx;

			.title {
				margin-left: 10rpx;
				height: 32rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 32rpx;
				color: rgba(255, 219, 181, 1);

				text {
					height: 24rpx;
					margin-left: 12rpx;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 24rpx;

				}
			}
		}

		.score_detail {
			display: flex;
			justify-content: space-between;
			padding: 0 15rpx;
			margin-top: 20rpx;
			color: rgba(255, 219, 181, 1);
			font-size: 60rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 60rpx;

			.btn {
				height: 52rpx;
				line-height: 52rpx;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 1);
				padding: 0 20rpx;
				opacity: 1;
				border-radius: 148rpx;
				background: linear-gradient(90deg, rgba(255, 234, 203, 1) 0%, rgba(232, 188, 119, 1) 100%);
			}
		}
	}

	.order_list {
		height: 240rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-top: 36rpx;
		padding: 32rpx;

		.list_heared {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
		}

		.list_type {
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;

			.type_title {
				text-align: center;

				.title {
					margin-top: 26rpx;
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 24rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}

	.collect_list {
		height: 240rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;

		.collect_title {
			text-align: center;

			.title {
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 26rpx;
				color: rgba(51, 51, 51, 1);
				margin-top: 10rpx;
			}
		}
	}
</style>